<template>
  <el-container class="h-screen relative z-50">
    <el-header class="login-header flex justify-center text-center bg-primary">
      <div class="container-base">
        <div class="login-logo relative flex justify-center">
          <img class="login-logo__origin z-10" :src="common.logo" alt="Logo" />
        </div>
      </div>
    </el-header>
    <el-main
      class="login-main bg-cover flex flex-col justify-center"
      :style="{
        backgroundImage: `url(${common.loginBg})`,
      }"
    >
      <div class="flex justify-center">
        <div class="login-panel px-8 pt-4 pb-2">
          <p>Admin</p>
          <el-form
            :model="formInline"
            class="demo-form-inline"
            @keyup.enter="onLogin"
          >
            <el-form-item>
              <el-input v-model="formInline.username" placeholder="用户名" />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formInline.password"
                type="password"
                placeholder="密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="w-full" @click="onLogin"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
    <el-footer class="login-footer text-center">
      <div class="login-footer-logo">
        <img :src="common.logo" alt="Logo" />
      </div>
      <ul class="login-footer-link">
        <li
          v-for="item in links"
          :key="item.name"
          class="login-footer-link__item relative px-2 inline text-sm"
        >
          <a
            class="text-white no-underline"
            :href="item.url"
            :rel="item.rel || 'friend'"
            >{{ item.name }}</a
          >
        </li>
      </ul>
      <p class="login-footer-copyright text-white text-base">
        &copy; {{ footerCopyright }}
      </p>
    </el-footer>
  </el-container>
  <login-captcha
    :dialog-visible="captchaVisible"
    @success="onCaptchaSuccess"
    @close="captchaVisible = false"
  ></login-captcha>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  // import { login } from '@/http/login';
  import router from '@/router';
  import { setAuthToken, setPermissions } from '@/utils/auth';
  import { common } from '@/model/images/common';

  const captchaVisible = ref(false);

  const formInline = reactive({
    username: '',
    password: '',
  });
  const onLogin = async () => {
    if (!formInline.username || !formInline.password) {
      if (!formInline.username)
        ElMessage({
          message: '请输入用户名',
          type: 'warning',
        });
      else
        ElMessage({
          message: '请输入密码',
          type: 'warning',
        });
      return;
    }
    captchaVisible.value = true;
  };

  const onCaptchaSuccess = async () => {
    // const res = await login(formInline);
    // const auth_token = res.token;
    setAuthToken('token', formInline.username);
    setPermissions([]);
    captchaVisible.value = false;
    ElMessage({
      message: '登录成功',
      type: 'success',
      duration: 1000,
    });
    // let url = checkPermissionPath(res.permissionList);
    // console.log(url, '返回url');
    // router.push(url);
    router.push('/home');
  };

  /**
   * 底部链接相关
   */
  interface Link {
    url: string;
    name: string;
    rel?: string;
  }
  const links: Link[] = [
    {
      url: '#',
      name: '招贤纳士',
    },
    {
      url: '#',
      name: '联系我们',
    },
    {
      url: '#',
      name: 'Admin',
    },
    {
      url: '#',
      name: '隐私权声明',
    },
    {
      url: '#',
      name: 'Cookie政策',
    },
    {
      url: '#',
      name: '使用条款',
    },
    {
      url: '#',
      name: '产品安全',
    },
    {
      url: '#',
      name: '沪ICP备xxxx号',
      rel: 'nofollow',
    },
    {
      url: '#',
      name: '沪公网安备xxxxx号',
      rel: 'nofollow',
    },
  ];

  const footerCopyright = `Koninklijke Ashang N.V.，2018 - ${new Date().getFullYear()}。保留所有权利。`;
</script>

<style lang="scss" scoped>
  .login-header {
    height: 48px;
  }
  .login-logo {
    width: 98px;
    height: 51px;
    background-image: linear-gradient(to right, #c46eea 0, #943efe 100%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    &__origin {
      margin-top: 15px;
      height: 15px;
    }
    &::after {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      content: ' ';
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='xMidYMid meet' x='0' y='0' width='98' height='45' viewBox='0, 0, 196, 90'%3E%3Cpath d='M154.001,90.001 C176.012,90.022 195.966,82.011 196.001,60 L196.001,0.001 L-0.001,0.001 L-0.001,90.001 L154.001,90.001 z' fill='%23fff' id='Shape_top'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      z-index: 0;
    }
  }
  .login-main {
    min-height: 400px;
  }
  .login-panel {
    background-color: rgba($color: #fff, $alpha: 0.6);
    width: 360px;
  }

  .login-footer {
    padding-top: 50px;
    padding-bottom: 20px;
    height: auto;
    background-image: linear-gradient(
      to bottom right,
      #003655 0,
      #0066a1 50%,
      #0096ee 100%
    );
    background-repeat: no-repeat;
    &-link {
      &__item {
        &::after {
          position: absolute;
          left: 0%;
          top: 3px;
          content: ' ';
          width: 1px;
          height: 14px;
          background-color: #fff;
        }
        &:first-child {
          &::after {
            display: none;
          }
        }
      }
    }
  }
</style>
